<template>
  <div class="profile-page">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="profile-card">
          <div class="profile-header">
            <el-avatar 
              :size="120" 
              :src="profile.avatar"
            >
              <el-icon><UserFilled /></el-icon>
            </el-avatar>
            <h2>{{ baseInfo.name }}</h2>
            <p class="title">{{ profile.teacher.title }}</p>
          </div>
          <el-divider />
          <div class="profile-info">
            <div class="info-item">
              <el-icon><School /></el-icon>
              <span>{{ profile.college.name }}</span>
            </div>
            <div class="info-item">
              <el-icon><Phone /></el-icon>
              <span>{{ profile.teacher.baseInfo.phone }}</span>
            </div>
          </div>
          <el-button 
            type="primary" 
            class="edit-button"
            @click="handleEdit"
          >
            编辑资料
          </el-button>
        </el-card>
      </el-col>

      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <h3>详细信息</h3>
            </div>
          </template>
          
          <el-descriptions :column="2" border>
            <el-descriptions-item label="工号">{{ profile.teacher.baseInfo.campusId }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ profile.teacher.baseInfo.sex }}</el-descriptions-item>
            <el-descriptions-item label="所属院系">{{ profile.college.name }}</el-descriptions-item>
            <el-descriptions-item label="职称">{{ profile.teacher.title }}</el-descriptions-item>
            <el-descriptions-item label="入职时间">{{ profile.teacher.dateOfEntry }}</el-descriptions-item>
            <el-descriptions-item label="办公室">{{profile.teacher.officeAddress}}</el-descriptions-item>
            <el-descriptions-item label="个人简介" :span="2">{{ profile.teacher.biography }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="编辑个人资料"
      width="600px"
    >
      <el-form
        ref="formRef"
        :model="editForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="工号" prop="campusId">
          <el-input v-model="editForm.campusId" disabled/>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input :model-value="editForm.name" disabled/>
        </el-form-item>

        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="editForm.phone" />
        </el-form-item>

        <el-form-item label="性别" prop="sex">
<!--          <el-input v-model="editForm.phone"/>-->
          <el-select v-model="editForm.sex" placeholder="选择性别">
            <el-option value="男" label="男"/>
            <el-option value="女" label="女"/>
          </el-select>
        </el-form-item>

        <el-form-item label="办公室地址" prop="office">
          <el-input v-model="editForm.office" />
        </el-form-item>

        <el-form-item label="个人简介" prop="bio">
          <el-input
            v-model="editForm.bio"
            type="textarea"
            :rows="4"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {useUserStore} from "@/stores/userStores.js"
import { storeToRefs } from "pinia";
const {baseInfo, teacher } = storeToRefs(useUserStore())
import { ElMessage } from 'element-plus'
import { 
  UserFilled,
  School,
  Phone,
  Message,
  Plus
} from '@element-plus/icons-vue'
import axios from "axios";
import baseURL from "@/config/config.js";

// 个人信息数据
const profile = ref({
  "teacher": {
    "baseInfo": {
      "campusId": "",
      "name": "",
      "phone": "",
      "sex": ""
    },
    "teacherId": "",
    "collegeId": 0,
    "title": "",
    "dateOfEntry": "",
    "officeAddress": "",
    "biography": null
  },
  "college": {
    "collegeId": "",
    "name": ""
  },
  "lectures": [
    {
      "classId": 0,
      "className": "",
      "courseId": 0,
      "courseName": ""
    },
    {
      "classId": 0,
      "className": "",
      "courseId": 0,
      "courseName": ""
    }
  ]
})

// 编辑表单
const dialogVisible = ref(false)
const submitting = ref(false)
const formRef = ref(null)

const editForm = reactive({
  campusId: baseInfo.campusId,
  name: baseInfo.name,
  phone: '',
  sex: '',
  office: '',
  bio: ''
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
}


// 处理编辑按钮点击
const handleEdit = () => {
  Object.assign(editForm, {
    campusId: profile.value.teacher.baseInfo.campusId,
    name: profile.value.teacher.baseInfo.name,
    phone: profile.value.teacher.baseInfo.phone,
    sex: profile.value.teacher.baseInfo.sex,
    office: profile.value.teacher.officeAddress,
    bio: profile.value.teacher.biography
  })
  dialogVisible.value = true
}

function updateTeacherProfile(){
  axios({
    url: baseURL + '/teacher/update',
    method: 'post',
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`
    },
    data: {
      campusId: editForm.campusId,
      name: editForm.name,
      phone: editForm.phone,
      sex: editForm.sex,
      officeAddress: editForm.office,
      bio: editForm.bio,
    }
  }).then((res) => {
    console.log("更新个人信息", res)
    ElMessage({
      type: 'success',
      message: "更新完成。"
    })
    profile.value.teacher.baseInfo.campusId = editForm.campusId
    profile.value.teacher.baseInfo.name = editForm.name
    profile.value.teacher.baseInfo.phone = editForm.phone
    profile.value.teacher.bio = editForm.bio
    profile.value.teacher.baseInfo.sex = editForm.sex
    profile.value.teacher.officeAddress = editForm.office

  }).catch(()=> {
    ElMessage.error("保存失败了")
  }).finally(() => {
    dialogVisible.value = false
    submitting.value= false
  })
}
// 处理表单提交
const handleSubmit = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      submitting.value = true
      updateTeacherProfile()
    }
  })
}
onMounted(() => {
  axios({
    url: baseURL + "/teacher/get-detail-info",
    method: 'get',
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`,
    }
  }).then((res) => {
    profile.value = res.data.data
  })
})
</script>

<style scoped>
.profile-page {
  padding: 20px;
}

.profile-card {
  text-align: center;
}

.profile-header {
  padding: 20px 0;
}

.profile-header h2 {
  margin: 15px 0 5px;
  font-size: 20px;
  color: #1f2937;
}

.profile-header .title {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.profile-info {
  text-align: left;
  padding: 0 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #4b5563;
}

.info-item .el-icon {
  font-size: 18px;
  color: var(--el-color-primary);
}

.edit-button {
  width: 100%;
  margin-top: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #1f2937;
}

.course-tag {
  margin-right: 8px;
  margin-bottom: 4px;
}

.avatar-uploader {
  text-align: center;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  border: 1px dashed var(--el-border-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 